<template>
    <div>
        <el-form-item :label="$t('channel')">
            <el-input-number v-model="setting.speed.channel" :min="1" :max="32" />
        </el-form-item>
        <el-form-item :label="$t('record')">
            <el-input-number v-model="setting.errorLimit.record" />
        </el-form-item>
        <el-form-item :label="$t('percentage')">
            <el-input-number v-model="setting.errorLimit.percentage" />
        </el-form-item>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const setting = ref({
    "speed": {
        "channel": 3
    },
    "errorLimit": {
        "record": 0,
        "percentage": 0.02
    }
})

store.commit('setBaseSetting', setting.value)

watch(
  setting,
  (state, prevState) => {
    console.log('deep', state, prevState)
    store.commit('setBaseSetting', state)
  },
  { deep: true }
)
</script>